<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页 - 开发者的项目空间</title>
    <link rel="stylesheet" href="/css/element-ui.css">
    <link rel="stylesheet" href="/css/index.css">
    <script src="/js/vue.js"></script>
    <script src="/js/element-ui.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/qs.js"></script>
</head>

<body>
<div id="app">
    <!-- 顶栏 -->
    <el-container class="layout-header-wrapper">
        <el-header class="layout-header">
            <h1> {{ profile.name }}的个人网站</h1>
        </el-header>
    </el-container>

    <el-container class="layout-body-wrapper">
        <div class="layout-body">
            <!-- 个人信息 -->
            <el-card class="profile">
                <el-row :gutter="12">
                    <el-col :span="18">
                        <div class="info">
                            <h1>欢迎查看我的作品集</h1>
                            <p>
                                {{ profile.description }}
                            </p>
                            <div class="btn-wrapper">
                                <el-button type="primary" class="btn" @click="contactInfoDialog.visible = true">
                                    联系我
                                </el-button>
                                <el-button type="primary" class="btn" @click="profileDrawer.visible = true">
                                    更多资料
                                </el-button>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="photo-wrapper">
                            <el-avatar shape="square" class="photo" :src="profile.photoRemoteUrl"
                                       alt="个人形象照"></el-avatar>
                        </div>
                    </el-col>
                </el-row>
            </el-card>

            <!-- 项目列表 -->
            <div class="project-list">
                <h1>我参与的项目</h1>
                <el-row :gutter="24">
                    <el-col :span="8" v-for="(project, index) in projectList" :key="index">
                        <el-card class="project-item" shadow="hover" :body-style="{ 'padding': '0px' }">
                            <div class="image-wrapper">
                                <el-image :src="project.coverRemoteUrl" class="image" fit
                                          @click="showProjectDetails(project.id)"></el-image>
                            </div>
                            <div>
                                <div class="tag-list">
                                    <span class="tag" size="mini" v-for="tag in project.tags.split(',')" :key="tag">
                                      {{ tag }}
                                    </span>
                                </div>
                                <h2 @click="showProjectDetails(project.id)">{{ project.name }}</h2>
                                <div @click="showProjectDetails(project.id)" class="summary">
                                    {{ project.summary }}
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>

            <!-- 对话框：联系方式 -->
            <el-dialog :visible.sync="contactInfoDialog.visible" title="个人名片">
                <el-descriptions :column="1" border>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user"></i>
                            姓名
                        </template>
                        {{ profile.name }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-mobile-phone"></i>
                            手机号码
                        </template>
                        {{ profile.phoneNumber }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-message"></i>
                            电子邮箱
                        </template>
                        {{ profile.email }}
                    </el-descriptions-item>
                </el-descriptions>
            </el-dialog>

            <!-- 抽屉：个人资料 -->
            <el-drawer
                    :visible.sync="profileDrawer.visible"
                    class="common-drawer"
                    size="36%"
                    destroy-on-close
                    direction="rtl">
                <template #title>
                    <div class="title" style="display: flex; align-items: center;">
                        <i class="el-icon-s-custom"></i>
                        <span style="margin-left: 10px;">个人资料</span>
                    </div>
                </template>
                <div class="content">
                    <div class="details-wrapper">
                        <table class="info-table">
                            <tr>
                                <td class="label">姓名：</td>
                                <td class="value">{{profile.name}}</td>
                            </tr>
                            <tr>
                                <td class="label">性别：</td>
                                <td class="value">{{profile.gender == 1 ? '男' : '女'}}</td>
                            </tr>
                            <tr>
                                <td class="label">出生日期：</td>
                                <td class="value">{{profile.dayOfBirth}}</td>
                            </tr>
                            <tr>
                                <td class="label">手机号码：</td>
                                <td class="value">{{profile.phoneNumber}}</td>
                            </tr>
                            <tr>
                                <td class="label">电子邮箱：</td>
                                <td class="value">{{profile.email}}</td>
                            </tr>
                            <tr>
                                <td class="label">毕业院校：</td>
                                <td class="value">{{profile.graduationSchool}}</td>
                            </tr>
                            <tr>
                                <td class="label">学历：</td>
                                <td class="value">{{profile.educationLevel}}</td>
                            </tr>
                            <tr>
                                <td class="label">专业：</td>
                                <td class="value">{{profile.major}}</td>
                            </tr>
                            <tr>
                                <td class="label">自我介绍：</td>
                                <td class="value">{{profile.description}}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </el-drawer>

            <!-- 抽屉：项目详情 -->
            <el-drawer
                    :visible.sync="projectDetailsDrawer.visible"
                    class="common-drawer"
                    size="36%"
                    destroy-on-close
                    direction="rtl">
                <template #title>
                    <div class="title" style="display: flex; align-items: center;">
                        <i class="el-icon-s-order"></i>
                        <span style="margin-left: 10px;">{{ projectDetailsDrawer.project.name }}</span>
                    </div>
                </template>
                <div class="content">
                    <div class="cover-image-wrapper">
                        <el-image class="cover-image" :src="projectDetailsDrawer.project.coverRemoteUrl"
                                  fit="contain"></el-image>
                    </div>
                    <div class="details-wrapper">
                        <table class="info-table">
                            <tr>
                                <td class="label">时间：</td>
                                <td class="value">{{projectDetailsDrawer.project.startDate}} 至 {{projectDetailsDrawer.project.endDate == null ? '现在' : projectDetailsDrawer.project.endDate}}</td>
                            </tr>
                            <tr>
                                <td class="label">标签：</td>
                                <td class="value"><span class="tag" v-for="tag in projectDetailsDrawer.project.tags.split(',')" :key="tag">{{ tag }}</span></td>
                            </tr>
                            <tr>
                                <td class="label">技术栈：</td>
                                <td class="value">{{projectDetailsDrawer.project.technologies}}</td>
                            </tr>
                            <tr>
                                <td class="label">简介：</td>
                                <td class="value">{{projectDetailsDrawer.project.summary}}</td>
                            </tr>
                            <tr>
                                <td class="label">详情：</td>
                                <td class="value">{{projectDetailsDrawer.project.details}}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </el-drawer>
        </div>
    </el-container>

    <!-- 页面底部 -->
    <div class="layout-footer-wrapper">
        <div class="layout-footer">
            <h1>关于{{ profile.name }}</h1>
            <el-row class="row">
                <el-col :span="2"><span>毕业院校：</span></el-col>
                <el-col :span="6"><span>{{ profile.graduationSchool }}</span></el-col>
                <el-col :span="2"><span>专业：</span></el-col>
                <el-col :span="6"><span>{{ profile.major }}</span></el-col>
                <el-col :span="2"><span>学历：</span></el-col>
                <el-col :span="6"><span>{{ profile.educationLevel }}</span></el-col>
            </el-row>
            <el-row class="row">
                <el-col :span="2"><span>联系电话：</span></el-col>
                <el-col :span="6"><span>{{ profile.phoneNumber }}</span></el-col>
                <el-col :span="2"><span>电子邮箱：</span></el-col>
                <el-col :span="14"><span>{{ profile.email }}</span></el-col>
            </el-row>
            <el-row class="row">
                <el-col :span="2"><span>更多资料：</span></el-col>
                <el-col :span="22"><a href="###" @click="profileDrawer.visible = true" v-if="loadProfileSuccess">请点击查看</a>
                </el-col>
            </el-row>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            loadProfileSuccess: false,
            profile: {
                name: '开发者',
                gender: '',
                dayOfBirth: '',
                photoRemoteUrl: '',
                phoneNumber: '',
                email: '',
                graduationSchool: '',
                major: '',
                educationLevel: '',
                description: ''
            },
            projectList: [],
            contactInfoDialog: {
                visible: false
            },
            profileDrawer: {
                visible: false,
            },
            projectDetailsDrawer: {
                visible: false,
                project: {
                    id: 1,
                    coverRemoteUrl: '',
                    name: '',
                    startDate: '',
                    endDate: '',
                    sortOrder: 1,
                    tags: '',
                    technologies: '',
                    summary: '',
                    details: '',
                }
            }
        },
        methods: {
            loadProfile() {
                let url = '/api/profile/public';
                axios.get(url).then((response) => {
                    let jsonResult = response.data;
                    if (jsonResult.state === 20000) {
                        this.profile = jsonResult.data;
                        this.loadProfileSuccess = true;
                        document.title = '首页 - ' + this.profile.name + '的项目空间';
                    } else {
                        this.$alert(jsonResult.message, '错误', {
                            confirmButtonText: '确定',
                            type: 'error'
                        });
                    }
                }).catch(error => {
                    this.$alert('服务器端无法正确响应【获取个人信息】功能！', '错误', {
                        confirmButtonText: '确定',
                        callback: action => {
                        }
                    });
                });
            },
            loadProjectList() {
                let url = '/api/project/public';
                axios.get(url).then((response) => {
                    let jsonResult = response.data;
                    if (jsonResult.state === 20000) {
                        this.projectList = jsonResult.data;
                    } else {
                        this.$alert(jsonResult.message, '错误', {
                            confirmButtonText: '确定',
                            type: 'error'
                        });
                    }
                }).catch(error => {
                    this.$alert('服务器端无法正确响应【获取项目列表】功能！', '错误', {
                        confirmButtonText: '确定',
                        callback: action => {
                        }
                    });
                });
            },
            showProjectDetails(id) {
                let url = '/api/project/public/' + id;
                axios.get(url).then((response) => {
                    let jsonResult = response.data;
                    if (jsonResult.state === 20000) {
                        this.projectDetailsDrawer.project = jsonResult.data;
                        this.projectDetailsDrawer.visible = true;
                    } else {
                        this.$alert(jsonResult.message, '错误', {
                            confirmButtonText: '确定',
                            type: 'error'
                        });
                    }
                }).catch(error => {
                    this.$alert('服务器端无法正确响应【获取项目详情】功能！', '错误', {
                        confirmButtonText: '确定',
                        callback: action => {
                        }
                    });
                });
            }
        },
        mounted() {
            this.loadProfile();
            this.loadProjectList();
        }
    })
</script>
</body>
</html>